<template>
	<div class='login-page full'>
		<div class="bg-box" :style="'background-image:' + bgImg">
		</div>
		<div class="login-box">
			<div class='form-box'>
				<div class='title cn-font'>沉睡的海洋</div>
				<el-form class="form">
					<el-form-item>
						<el-input v-model='form.username' prefix-icon="el-icon-user" placeholder="用户名" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model='form.password' prefix-icon="el-icon-key" type="password" placeholder="密码" clearable></el-input>
					</el-form-item>
					<el-button type="primary" @click='submitForm'>登 录</el-button>
					<div class='link-box'><a>注册账号</a></div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import Utils from '../../../../utils/util';
export default {
	name: 'Login',
	data () {
		return {
			bgImg: '',
			form: {
				username: 'sleepy ocean',
				password: '123456'
			}
		};
	},
	created () {
		this.bgImg = `url('${Utils.getSettingCache('ImageServerUrl')}login-bg.png')`;
	},
	methods: {
		submitForm () {
			this.$message.success('欢迎 ' + this.form.username);
			this.$router.push('/sys/dash');
		}
	}
};
</script>

<style lang="scss" scoped>
	.login-page {
		.bg-box {
			width: calc(100% - 600px);
			height: 100%;
			float: left;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
		}

		.login-box {
			width: 600px;
			height: 100%;
			float: right;
			display: flex;
			align-items: center;
			padding: 0 120px;

			.form-box {
				width: 100%;

				.title {
					font-size: 60px;
					height: 80px;
					line-height: 80px;
					width: 100%;
					color: #010244;
				}

				.form {
					margin-top: 20px;

				}

				.link-box {
					font-size: 12px;
					color: #6d6de7;
					cursor: pointer;

					&:hover {
						color: #6d6de7aa;
					}
				}
			}
		}

	}
</style>
<style lang="scss">
	.login-page {
		.login-box {
			.form-box {
				.form {
					.el-form-item {
						margin: 48px 0;
					}

					.el-input__inner {
						height: 48px;
						line-height: 48px;
						font-size: 18px;
						padding: 0 50px;
						border: unset;
						border-bottom: 2px solid #eee;
						border-radius: 0;
						transition: all linear .2s;

						&:focus {
							border-bottom: 2px solid #484a7e;
						}
					}

					.el-input__prefix {
						font-size: 20px;
					}

					.el-button--primary {
						width: 80%;
						height: 48px;
						border-radius: 48px;
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 10px auto;
						background: #484a7e;
						border: unset;
						font-size: 18px;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>
